<script setup>
/*
  在vue2中声明的数据默认为响应式数据，但是在vue3中声明的数据不是响应式数据
  必须要使用指定的函数进行处理，ref和reactive

  ref主要封装简单数据为响应式数据，例如字符串、数值、布尔
  reactive主要封装复杂数据为响应式数据，例如数组、对象

  ref()将数据封装为一个对象，数据是该对象的value属性值
  因此在vue中访问数据使用对象.value，但是在页面中访问该对象，不需要使用.value

  reactive()将数据封装为一个对象，数据直接通过对象.属性名访问

  ref()可以封装简单数据和复杂数据为响应式数据
  reactive()在封装简单数据的时候，可以在vue中操作，但是页面中无法实时更新

  toRef()将某个reactive响应式数据中指定键对应的值转换为ref响应式数据
  toRefs()将某个reactive响应式数据中所有键对应的值转换为ref响应式数据
*/
import { ref, reactive, toRef, toRefs } from 'vue';
let student = reactive({
  id:1001,
  name:"张三",
  age:23
})
/* let id = toRef(student, "id");
console.log(id); */
//解构表达式
let {id,name,age} = toRefs(student);
</script>

<template>
  <div>

  </div>
</template>

<style scoped>

</style>
